<template>
	<view class="admin-user-manage">
		<!-- 筛选区 -->
		<view class="filter-bar">
			<picker :range="userTypeOptions" :value="filter.userType" @change="onUserTypeChange">
				<view class="picker">{{ userTypeOptions[filter.userType] || '用户类型' }}</view>
			</picker>
			<picker :range="creditLevelOptions" :value="filter.creditLevel" @change="onCreditLevelChange">
				<view class="picker">{{ creditLevelOptions[filter.creditLevel] || '信用等级' }}</view>
			</picker>
			<picker mode="date" :value="filter.registerDate" @change="onRegisterDateChange">
				<view class="picker">{{ filter.registerDate || '注册时间' }}</view>
			</picker>
			<input class="search-input" v-model="filter.keyword" placeholder="搜索昵称/学号/工号" />
			<button @click="onFilter">筛选</button>
			<button @click="onReset">重置</button>
		</view>

		<!-- 表格区 -->
		<view class="user-list">
			<view class="table-header">
				<view class="cell">头像</view>
				<view class="cell">昵称</view>
				<view class="cell">id</view>
				<view class="cell">注册时间</view>
				<view class="cell">信用分</view>
				<view class="cell">状态</view>
			</view>
			<view v-for="user in userList" :key="user.id">
				<!-- 第一行：用户信息 -->
				<view class="table-row">
					<view class="cell"><image :src="user.avatar" class="avatar" /></view>
					<view class="cell">{{ user.nickname }}</view>
					<view class="cell">{{ user.code }}</view>
					<view class="cell">{{ user.registerTime }}</view>
					<view class="cell">{{ user.credit }}</view>
					<view class="cell">{{ user.status }}</view>
				</view>
				<!-- 第二行：操作按钮 -->
				<view class="table-row operation-row">
					<view class="cell" style="flex: 0 0 60rpx"></view>
					<view class="cell" style="flex: 1" colspan="6">
						<div class="operation-btns">
							<button size="mini" @click="showDetail(user)">详情</button>
							<button size="mini" @click="adjustCredit(user)">调分</button>
							<button size="mini" v-if="user.status==='正常'" @click="banUser(user)">封禁</button>
							<button size="mini" v-else @click="unbanUser(user)">解封</button>
							<button size="mini" @click="assignRole(user)">分配权限</button>
						</div>
					</view>
				</view>
			</view>
		</view>
		<CustomTabBar :isAdmin="true" />
		<!-- 弹窗区域 -->
		<user-detail-modal
			v-if="showUserDetail"
			:user="selectedUser"
			@close="showUserDetail = false"
		/>
	</view>
</template>

<script>
import CustomTabBar from '../../../../components/CustomTabBar.vue';
	export default {
		components: {
			CustomTabBar
		},
		data() {
			return {
				// 筛选条件
				filter: {
					userType: 0,
					creditLevel: 0,
					registerDate: '',
					keyword: ''
				},
				userTypeOptions: ['全部', '普通用户', '管理员'],
				creditLevelOptions: ['全部', '钻石', '黄金', '白银', '黑名单'],
				// 用户列表
				userList: [
					// 示例数据
					{
						id: 1,
						avatar: '/static/images/avatar1.png',
						nickname: '张三',
						code: '20230001',
						registerTime: '2023-01-01',
						credit: 100,
						taskCount: 10,
						status: '正常'
					}
					// ...更多用户
				],
				showUserDetail: false,
				selectedUser: null
			}
		},
		methods: {
			onUserTypeChange(e) {
				this.filter.userType = Number(e.detail.value)
			},
			onCreditLevelChange(e) {
				this.filter.creditLevel = Number(e.detail.value)
			},
			onRegisterDateChange(e) {
				this.filter.registerDate = e.detail.value
			},
			onFilter() {
				// TODO: 根据筛选条件请求数据
			},
			onReset() {
				this.filter = {
					userType: 0,
					creditLevel: 0,
					registerDate: '',
					keyword: ''
				}
				// TODO: 重置后刷新数据
			},
			showDetail(user) {
				this.selectedUser = user
				this.showUserDetail = true
			},
			adjustCredit(user) {
				// TODO: 实现调分逻辑
			},
			banUser(user) {
				// TODO: 实现封禁逻辑
			},
			unbanUser(user) {
				// TODO: 实现解封逻辑
			},
			assignRole(user) {
				// TODO: 实现分配权限逻辑
			}
		}
	}
</script>

<style lang="scss">
	.admin-user-manage {
		background: #f7f8fa;
		min-height: 100vh;
		padding: 32rpx 0 80rpx 0;

		// 顶部筛选区
		.filter-bar {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			margin: 0 auto 15rpx auto;
			background: #f9fafb;
			border-radius: 20rpx;
			box-shadow: 0 2rpx 12rpx rgba(74,144,226,0.04);
			padding: 28rpx 36rpx 20rpx 36rpx;
			width: 92%;
			gap: 18rpx;

			.picker {
				margin-right: 0;
				min-width: 170rpx;
				font-size: 24rpx;
				color: #222;
				background: #fff;
				border-radius: 10rpx;
				border: 1rpx solid #e5e6eb;
				padding: 10rpx 18rpx;
				transition: border 0.2s;
				&:focus {
					border: 1rpx solid #4a90e2;
				}
			}
			.search-input {
				width: 380rpx;
				font-size: 24rpx;
				color: #222;
				background: #fff;
				border-radius: 10rpx;
				border: 1rpx solid #e5e6eb;
				padding: 10rpx 18rpx;
				transition: border 0.2s;
				&:focus {
					border: 1rpx solid #4a90e2;
				}
			}
			button {
				background: #4a90e2;
				color: #fff;
				border: none;
				border-radius: 10rpx;
				// padding: 10rpx 8rpx;
				font-size: 28rpx;
				box-shadow: 0 2rpx 8rpx rgba(74,144,226,0.08);
				margin-right: 0;
				transition: background 0.2s;
				&:last-child {
					background: #e5e6eb;
					color: #4a90e2;
				}
				&:active {
					background: #357ab8;
				}
			}
		}

		// 表格区
		.user-list {
			background: #fff;
			border-radius: 18rpx;
			box-shadow: 0 2rpx 12rpx rgba(74,144,226,0.06);
			width: 92%;
			margin: 0 auto;
			overflow: hidden;

			.table-header {
				display: flex;
				align-items: center;
				background: #f0f4fa;
				border-radius: 18rpx 18rpx 0 0;
				font-weight: bold;
				color: #2a2a2a;
				font-size: 30rpx;
				border-bottom: 2rpx solid #e5e6eb;
				padding: 22rpx 0 18rpx 0;
				box-shadow: 0 2rpx 8rpx rgba(74,144,226,0.03);
				letter-spacing: 2rpx;
			}
			.table-row {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #f0f0f0;
				padding: 20rpx 0;
				font-size: 26rpx;
				color: #222;
				background: #fff;
				transition: background 0.2s;
				&:hover {
					background: #f5f8fc;
				}
			}
			.cell {
				flex: 1;
				text-align: center;
				padding: 0 6rpx;
				word-break: break-all;
				&.avatar {
					flex: 0 0 60rpx;
				}
			}
			.avatar {
				width: 56rpx;
				height: 56rpx;
				border-radius: 50%;
				border: 2rpx solid #e5e6eb;
				background: #f7f8fa;
				object-fit: cover;
			}
			// 操作按钮行
			.operation-row {
				background: #f7f8fa;
				.cell {
					border: none;
					background: transparent;
					padding: 5rpx 0 10rpx 0;
				}
				.operation-btns {
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 20rpx;
					button {
						min-width: 70rpx;
						// padding: 10rpx 24rpx;
						font-size: 24rpx;
						border-radius: 8rpx;
						margin: 0 2rpx;
						background: #fff;
						border: 1rpx solid #e5e6eb;
						color: #4a90e2;
						box-shadow: 0 2rpx 6rpx rgba(74,144,226,0.04);
						transition: background 0.2s, color 0.2s, border 0.2s;
						&:active {
							background: #e5e6eb;
						}
						// 主操作
						&:first-child {
							background: #4a90e2;
							color: #fff;
							border: 1rpx solid #4a90e2;
							&:active {
								background: #357ab8;
							}
						}
						// 危险操作
						&[v-if], &[v-else] {
							background: #fff0f0;
							color: #e57373;
							border: 1rpx solid #e57373;
							&:active {
								background: #ffeaea;
							}
						}
					}
				}
			}
		}
	}
</style>
